// 个人页
import React from 'react'
import './Mine.css'
import MineI from '../mine.png' //个人头像
import Money from '../money.png' //钱包图
import collectImg from '../../../images/mineImg/order1.png'//收藏商品图
import Shopping from '../../../images/shopping.png' 
import OrderImg from '../../../images/orderImg/order.png'
import {Link} from 'react-router-dom'
let MineImge ={
    background:`url(${MineI})no-repeat`,
    backgroundSize:'100%'
}
let MoneyImg ={
    background:`url(${Money})no-repeat`,
    backgroundSize:'100%'
}
export default class Mine extends React.Component{
    constructor(props){
        super(props)
        this.state={
            user:sessionStorage.getItem('name')// 从session中获取账号
        }
    }
    render(){
        if(this.state.user===null){
            return (
                <div className="mineRight">
                    <h2>用户没登录，请立即<Link to="/login">点击前往登录</Link></h2>
                </div>
            )
        }else{
            return (
                            <div className="mineRight">
                                    <div className='mineImg'>
                                        <div className="mineImages" style={MineImge}>
                                        </div>
                                        <div className="mineMessage">
                                            <h3>骑着蜗牛狂飙<span>VIP会员</span></h3>
                                            <h4>广州市 天河区 东圃时代TIT广场430 <a>[修改]</a></h4>
                                        </div>
                                    </div>
                                    <div className="mineMoney">
                                        <div className="moneyImg" style={MoneyImg}>
                                        </div>
                                        <div className="moneyMessage">
                                            <h5>我的余额</h5>
                                            <h4>￥88.5</h4>    
                                        </div>
                                    </div>
                                    <h4 className="mineOrder">我的订单<span className="floatRight">更多</span></h4>
                                    <div className="orderMessage">
                                        <h5>订单编号：SHYJ125203</h5>
                                        <ul>
                                            <li>
                                                <span><img src={OrderImg} alt=""/></span>
                                                <span>商品名</span>
                                                <span>x2</span>
                                                <span>￥88.5<a>在线支付</a></span>
                                                <span>等待付款<a>订单详情</a></span>
                                                <span><button>立即付款</button></span>
                                            </li>
                                        </ul>
                                    </div>
                                    <h4 className="mineOrder">我的收藏<span className="floatRight">更多</span></h4>
                                    <div className="collectMessage">
                                        <ul>
                                            <li>
                                                <img src={collectImg} alt=""/>
                                                <p>同仁堂牌  枸杞子枸杞王500g</p>
                                                <p><span>￥58.99</span><s>￥79.99</s></p>
                                                <p><button><img src={Shopping} alt=""/>加入购物车</button></p>
                                            </li>
                                            <li>
                                                <img src={collectImg} alt=""/>
                                                <p>同仁堂牌  枸杞子枸杞王500g</p>
                                                <p><span>￥58.99</span><s>￥79.99</s></p>
                                                <p><button><img src={Shopping} alt=""/>加入购物车</button></p>
                                            </li>
                                            <li>
                                                <img src={collectImg} alt=""/>
                                                <p>同仁堂牌  枸杞子枸杞王500g</p>
                                                <p><span>￥58.99</span><s>￥79.99</s></p>
                                                <p><button><img src={Shopping} alt=""/>加入购物车</button></p>
                                            </li>
                                            <li>
                                                <img src={collectImg} alt=""/>
                                                <p>同仁堂牌  枸杞子枸杞王500g</p>
                                                <p><span>￥58.99</span><s>￥79.99</s></p>
                                                <p><button><img src={Shopping} alt=""/>加入购物车</button></p>
                                            </li>
                                        </ul>
                                    </div>
                            </div>
            )  
        }
        
    }
}